<template>
	<view class="container">
		<view v-if="showWeChatTip" class="wechat-tip">
		      <view class="tip-content">
		        <text>为了更好的体验，请点击右上角</text>
		        <text>选择"在浏览器中打开"。</text>
				<text>手机端暂不支持</text>
		        
		      </view>
		    </view>
		<!-- 左侧控制区 -->
		<view class="control-panel">

			<!-- 文件选择 -->
			<button @click="choosePDF" class="select-btn">选择PDF文件</button>

			<!-- 文件信息 -->
			<view v-if="pdfInfo" class="file-info">
				<text class="file-name">文件名: {{ pdfInfo.name }}</text>
				<text class="page-count">页数: {{ pdfInfo.totalPages }}</text>
			</view>

			<view v-if="loading" class="status">
				<text v-if="currentPage">解析中: 第 {{ currentPage }}/{{ pdfInfo.totalPages }} 页</text>
				<text v-else>加载中...</text>
			</view>
			<view v-if="error" class="error">{{ error }}</view>


			<!-- 第一页文字预览 -->

			<view class="text-preview">
				<view style="display: flex;" class="">
					<text class="section-title">标签内容</text>
					<text>第</text>
					<input style="flex: 1; border: 1px solid #d6d6d6; flex-basis: 5px;border-radius: 5px;" type="text" v-model="pdf_view_page" @input="page_input"/>
					<text>页</text>
				</view>
				
				<scroll-view scroll-y class="page-lines">
					<view v-for="(line, index) in firstPageLines" :key="index" class="text-line">
						<text class="line-number">ID{{index}}>></text>
						<text class="line-text">{{ line.text }}</text>
						<text class="line-coords">(X:{{ line.minX }},Y:{{ line.y }})</text>
					</view>
				</scroll-view>
				<view style="display: flex;" v-if="firstPageLines.length">
					<button @click="up_page">上一页</button>
					<button @click="down_page">下一页</button>
				</view>

				
				<view class="" >


					<button  @click="tohelp" :disabled="processing"
						class=" process-btn process-btn">
						使用帮助
					</button>

					<button v-if="allPagesText.length" @click="processPDF" :disabled="processing"
						class="action-btn process-btn">
						{{ processing ? '正在处理...' : '添加分类水印' }}
					</button>

					<!-- 下载按钮 -->
					<button v-if="processedPDF" @click="downloadPDF" class="action-btn download-btn">
						下载PDF
					</button>
					
				</view>
			</view>



			<!-- 状态信息 -->

		</view>
		<!-- 参数区 -->
		<scroll-view scroll-y class="control-input">
			<text style="text-align: center; color:black; margin: 10px;">分类参数</text>
			
			<view class="row-container">
				<view class="label">一级分类ID(房间名)</view>
				<input class="input-field" v-model="setup_value.nameid" ref="nameid" />
			</view>
			
			<view class="row-container">
				<view class="label">二级分类ID(柜体名)</view>
				<input class="input-field" v-model="setup_value.parkid" ref="parkid" />
			</view>
			<view class="row-container">
				<view class="label">分类阴影位置X</view>
				<input class="input-field" v-model="setup_value.namex" ref="namex" />
			</view>
			<view class="row-container">
				<view class="label">分类阴影位置y</view>
				<input class="input-field" v-model="setup_value.namey" ref="namey" />
			</view>
			<view class="row-container">
				<view class="label">分类阴影大小</view>
				<input class="input-field" v-model="setup_value.namesize" ref="namesize" />
			</view>
			<view class="row-container">
				<view class="label">分类阴影透明度</view>
				<input class="input-field" v-model="setup_value.namedisp" ref="namedisp" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件ID</view>
				<input class="input-field" v-model="setup_value.otherid" ref="otherid" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件阴影位置X</view>
				<input class="input-field" v-model="setup_value.otherx" ref="otherx" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件阴影位置y</view>
				<input class="input-field" v-model="setup_value.othery" ref="othery" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件阴影大小</view>
				<input class="input-field" v-model="setup_value.othersize" ref="othersize" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件阴影透明度</view>
				<input class="input-field" v-model="setup_value.otherdisp" ref="otherdisp" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件ID-2</view>
				<input class="input-field" v-model="setup_value.otherid2" ref="otherid2" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件阴影大小2</view>
				<input class="input-field" v-model="setup_value.othersize2" ref="othersize2" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件阴影位置2X</view>
				<input class="input-field" v-model="setup_value.otherx2" ref="otherx2" />
			</view>
			<view class="row-container">
				<view class="label">特殊板件阴影位置2y</view>
				<input class="input-field" v-model="setup_value.othery2" ref="othery2" />
			</view>
			<view class="row-container">
				<view class="label">标签文字X轴阈值</view>
				<input class="input-field"  v-model="setup_value.overx" ref="overx" />
			</view>
			<view class="row-container">
				<view class="label">标签过滤</view>
				<input class="input-field"  v-model="setup_value.filter" ref="filter" />
			</view>
			<view class="row-container">
				<text class="label" >是否红色</text>
				<switch  @change="switch2Change" :checked="setup_value.isred" ref="isred" />
			</view>
			
			
			<view style="margin: 10px;" >
				<button  @click="save_setup" :disabled="processing" class=" process-btn2">
					保存参数
				</button>
				<button  @click="other_setup" :disabled="processing" class=" process-btn2">
					特殊板件定义
				</button>
			</view>
			
			
		</scroll-view>
		<view class="control-input">
			<text style="margin-bottom: 10px;">分类信息</text>
			<view style="display: flex;"  v-for="(item,index) in out_room" :key="item.id">
				<text style="flex: 4; border-bottom: 1px dashed #555;">{{item}}</text>
				<text style="flex: 1;">{{ english[index] }}</text>		
			</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 右侧PDF预览区 -->
		<view class="preview-panel">
			<text class="section-title">PDF预览</text>
			<view class="pdf-view-container">
				<iframe v-if="pdfUrl" :src="pdfUrl" class="pdf-view"></iframe>
				<!-- <view v-else class="empty-preview">
					<text></text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		PDFDocument,
		rgb,
		degrees 
	} from 'pdf-lib';
	// 替换原来的引入方式
	import * as pdfjsLib from 'pdfjs-dist/build/pdf';
	import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
	pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
	import fontkit from '@pdf-lib/fontkit';
	export default {
		data() {
			return {
				showWeChatTip:false,
				msgType: null,
				messageText: null,
				setup_value: {},
				loading: false,
				processing: false,
				error: null,
				pdfInfo: null,
				pdfFile: null,
				currentPage: 0,
				allPagesText: [],
				firstPageLines: [],
				processedPDF: null,
				pdfUrl: null,
				out_room:null,
				out_park:null,
				english:'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
				other_item:null   ,//特殊板件关键字
				pdf_view_page:1,
				
			};
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			
			if(systemInfo.platform === 'windows' || systemInfo.platform === 'mac' || systemInfo.ua.includes('MicroMessenger')){
				if(systemInfo.ua.includes('MicroMessenger')){
					this.showWeChatTip = true
					setTimeout(()=>{
						uni.redirectTo({
							url: '/pages/help/index'
						});
					},5000)
					
				}
			}else{				
				uni.redirectTo({
					url: '/pages/help/index'
				});
			}
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: 'storage_data',
				success: function(res) {
					console.log(res);
					that.setup_value = res.data
				},
				fail: function() {
					console.log("fali");
					that.setup_value = {
						"nameid": 3,
						"parkid": 0,
						"namex": 50,
						"namey": 70,
						"namesize": 50,
						"namedisp": 0.5,
						"otherid": 7,
						"otherx": 70,
						"othery": 100,
						"othersize": 50,
						"otherdisp": 0.5,
						"otherid2" :0,
						"othersize2":50,
						"otherx2":50,
						"othery2":50,
						"isred":false,
						"filter":0,
						"overx":200
					}
				}
			});
			
			uni.getStorage({
				key: 'other_data',
				success: function (res) {
					console.log(res);
					that.other_item = res.data
				},
				fail: function() {
					console.log("fali");
					that.other_item = [{"key":"异形","name":"Y"}]
				}
				
			});
			


		},
		methods: {
			switch2Change (e) {
			            if(e.detail.value){
							this.isred = true
							this.setup_value.isred = true
						}else{
							this.isred = false
							this.setup_value.isred = false
						}
			        },
			up_page(){
				this.pdf_view_page = parseInt(this.pdf_view_page) - 1
				if(this.pdf_view_page <1){
					this.pdf_view_page = this.allPagesText.length
					
				}
				this.page_input({"target":{"value":this.pdf_view_page}})
			},
			down_page(){				
				
				if(this.pdf_view_page >= this.allPagesText.length){
					this.pdf_view_page = 0
					
				}
				this.pdf_view_page = parseInt(this.pdf_view_page) + 1
				this.page_input({"target":{"value":this.pdf_view_page}})
			},
			page_input(e){				
				if (this.allPagesText.length >= parseInt(e.target.value)) {
					this.firstPageLines = this.allPagesText[this.pdf_view_page-1];
				}
				
			},
			dialogClose() {
				this.$refs.popup.close()
			},
			tohelp() {
				uni.navigateTo({
					url: '/pages/help/index'
				});
			},

			save_setup() {
				let that = this
				var storage_data = this.setup_value
				uni.setStorage({
					key: "storage_data",
					data: storage_data,
					success: function() {
						console.log('success');
						that.msgType = "success"
						that.messageText = `参数保存成功`
						that.$refs.message.open()
					},
					fail: function() {
						console.log("fali");
					}
				});

			},
			other_setup() {
				uni.navigateTo({
					url: '/pages/other/index'
				});
			},
			// 选择PDF文件
			async choosePDF() {
				const input = document.createElement('input');
				input.type = 'file';
				input.accept = '.pdf';
				input.onchange = async (e) => {
					const file = e.target.files[0];
					if (!file) return;

					try {
						this.resetState();
						this.loading = true;
						uni.showLoading({
							title: '加载中'
						})
						this.pdfFile = file;

						const arrayBuffer = await file.arrayBuffer();
						const pdf = await pdfjsLib.getDocument({
							data: arrayBuffer
						}).promise;
						
						this.pdfInfo = {
							name: file.name,
							totalPages: pdf.numPages
						};

						await this.extractAllPagesText(pdf);

						if (this.allPagesText.length > 0) {
							this.firstPageLines = this.allPagesText[this.pdf_view_page-1];
						}

					} catch (err) {
						this.error = `文件解析失败: ${err.message}`;
						console.error(err);
					} finally {
						this.loading = false;
						uni.hideLoading()
					}
				};
				input.click();
			},

			// 提取所有页面文字
			async extractAllPagesText(pdf) {
				this.allPagesText = [];

				for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
					this.currentPage = pageNum;

					try {
						const page = await pdf.getPage(pageNum);
						const textContent = await page.getTextContent();						
						const lines = this.groupTextByCoordinates(textContent.items);
						var newlines = lines.filter((item)=>{
							return item.text = item.text.replace(/\s/g, "") 
						})
						// console.log(newarr);
						this.allPagesText.push(newlines);
					} catch (err) {
						console.error(`第 ${pageNum} 页解析失败:`, err);
						this.allPagesText.push([{
							text: '(内容解析失败)',
							y: 0,
							minX: 0
						}]);
					}

					await new Promise(resolve => setTimeout(resolve, 0));
				}
			},

			// 按坐标分组排序文字"左卧"
			groupTextByCoordinates(textItems) {				
				let that = this
				let tempoverx = 0
				if(that.$refs.overx.value == ""){
					tempoverx = 200
				}else{
					tempoverx = parseInt(that.$refs.overx.value)
				}
				
				const yGroups = {};
				textItems.forEach(item => {
					if(item.transform[4] < tempoverx){
						const y = Math.round(item.transform[5]);
						if (!yGroups[y]) yGroups[y] = [];
						yGroups[y].push({
							text: item.str,							
							x: item.transform[4],
							y: y,
							item: item
						});
					}
				});

				return Object.entries(yGroups)
					.sort(([y1], [y2]) => y2 - y1)
					.map(([y, items]) => {
						const sortedItems = items.sort((a, b) => a.x - b.x);
						return {
							text: sortedItems.map(i => i.text).join(' '),
							y: parseInt(y),
							minX: Math.round(sortedItems[0]?.x || 0),
							items: sortedItems
						};
					});
			},
			async findStringIndex(room, park, data1, data2) {
				const index1 = room.indexOf(data1)
				if(index1 == -1){           //如果房间名没有找到，直接分别新增两个数组  
					room.push(data1)
					park.push([data2])
					return [room, park]
				}else{
					const index2 = park[index1].indexOf(data2)
					if(index2 == -1){     //如果房间名找到，然后在park名里找
						park[index1].push(data2)
						return [room, park]
					}else{
						return [room, park]
					}
				}
				
			},
			// 处理PDF添加水印
			async processPDF() {
				const fontBytes = await fetch('./static/Alibaba-PuHuiTi-Regular.ttf').then(res => res.arrayBuffer());
				    
				const drar_color = this.setup_value.isred ? rgb(1, 0, 0) : rgb(0, 0, 0);
				if (!this.pdfFile || !this.allPagesText.length) return;
				var temproom = []
				var temppark = []
				try {
					this.processing = true;
					const arrayBuffer = await this.pdfFile.arrayBuffer();
					const pdfDoc = await PDFDocument.load(arrayBuffer);
					pdfDoc.registerFontkit(fontkit);
					const chineseFont = await pdfDoc.embedFont(fontBytes);
					for (let i = 0; i < pdfDoc.getPageCount(); i++) {
						var isFilter = false      //是否需要过滤  "614.00*50.00*18"
						const page = pdfDoc.getPage(i);
						const pageLines = this.allPagesText[i];
						if(this.$refs.filter.value != ""){
							for (let s of pageLines) {
								if(s.text.includes(this.$refs.filter.value)){
									isFilter = true
								}
							}
						}
						
						if(isFilter){
							continue
						}
						const resulr_data = await this.findStringIndex(temproom, temppark, pageLines[this.$refs.nameid
							.value].text, pageLines[this.$refs.parkid.value].text)						
						temproom = resulr_data[0]
						temppark = resulr_data[1]
						// console.log(temproom);
						// console.log(temppark);
						if (temproom.length > 52) {
							this.msgType = "error"
							this.messageText = `分类数量过多`
							this.$refs.message.open()
							return
						}
						const index1 = temproom.indexOf(pageLines[this.$refs.nameid.value].text)
						const index2 = temppark[index1].indexOf(pageLines[this.$refs.parkid.value].text)
						if (this.$refs.parkid.value == 0) {
							page.drawText(this.english[index1], {
								x: parseInt(this.$refs.namex.value),
								y: parseInt(this.$refs.namey.value),
								size: parseInt(this.$refs.namesize.value),
								opacity: parseFloat(this.$refs.namedisp.value),
								color: drar_color,
								font:chineseFont
							});
							// console.log(drar_color);
						} else {
							page.drawText(this.english[index1] + (index2+1) , {
								x: parseInt(this.$refs.namex.value),
								y: parseInt(this.$refs.namey.value),
								size: parseInt(this.$refs.namesize.value),
								opacity: parseFloat(this.$refs.namedisp.value),
								color: drar_color,
								font:chineseFont
							});
						}
						this.out_room = temproom
						this.out_park = temppark
						//特殊板件字符--多字符
						let that = this
						uni.getStorage({   //读取缓存
							key: 'other_data',
							success: function (res) {								
								that.other_item = res.data
							},
							
						});
						var draw_other = ""
						for (let i = 0; i < that.other_item.length; i++) {							
							if(pageLines[this.$refs.otherid.value].text.indexOf(that.other_item[i].key) >-1){
								draw_other = draw_other + that.other_item[i].name
							}
							
						}					
						if(draw_other != ""){
							page.drawText(draw_other[0] , {
								x: parseInt(this.$refs.otherx.value),
								y: parseInt(this.$refs.othery.value),
								size: parseInt(this.$refs.othersize.value),
								opacity: parseFloat(this.$refs.otherdisp.value),
								color: drar_color,
								font:chineseFont
							});
						}
						//特殊板件2阴影
						
						var draw_other2 = ""
						for (let i = 0; i < that.other_item.length; i++) {
							if(pageLines[this.$refs.otherid2.value].text.indexOf(that.other_item[i].key) >-1){
								draw_other2 = draw_other2 + that.other_item[i].name
							}
							
						}
						if(draw_other2 != ""){
							if(draw_other2.length ==1){
								page.drawText(draw_other2 , {
									x: parseInt(this.$refs.otherx2.value),
									y: parseInt(this.$refs.othery2.value),
									size: parseInt(this.$refs.othersize2.value),
									opacity: parseFloat(this.$refs.otherdisp.value),
									color: drar_color,
									font:chineseFont
								});
							}else {
								page.drawText(draw_other2[0]+draw_other2[1] , {
									x: parseInt(this.$refs.otherx2.value),
									y: parseInt(this.$refs.othery2.value),
									size: parseInt(this.$refs.othersize2.value),
									opacity: parseFloat(this.$refs.otherdisp.value),
									color: drar_color,
									font:chineseFont
								});
							}
							
						}
						
						
					}

					this.processedPDF = await pdfDoc.save();
					this.pdfUrl = URL.createObjectURL(
						new Blob([this.processedPDF], {
							type: 'application/pdf'
						})
					);

				} catch (err) {
					this.error = `PDF处理失败或都参数设置错误: ${err.message}`;
					console.error(err);
				} finally {
					this.processing = false;
				}
			},

			// 下载PDF
			downloadPDF() {
				if (!this.processedPDF) return;

				const blob = new Blob([this.processedPDF], {
					type: 'application/pdf'
				});
				const url = URL.createObjectURL(blob);
				const link = document.createElement('a');
				link.href = url;
				link.download = 'New_' + this.pdfInfo.name;
				link.click();

				setTimeout(() => URL.revokeObjectURL(url), 100);
			},

			// 重置状态
			resetState() {
				if (this.pdfUrl) URL.revokeObjectURL(this.pdfUrl);
				this.error = null;
				this.pdfInfo = null;
				this.pdfFile = null;
				this.currentPage = 0;
				this.allPagesText = [];
				this.firstPageLines = [];
				this.processedPDF = null;
				this.pdfUrl = null;
			}
		},

		beforeDestroy() {
			this.resetState();
		}
	};
</script>

<style>
	.grid {
		display: grid;
		/* 设置为Grid布局 */
		grid-template-columns: 1fr 1fr;
		/* 定义两列，每列占据相等的空间 */
		gap: 10px;
		/* 子项目之间的间隔 */
	}

	.input-item {
		padding: 10px;
		/* 内边距 */
		border: 1px solid #a1a1a1;
		/* 边框 */
		border-radius: 4px;
		/* 边框圆角 */
		margin: 10px;
	}

	.input-item_title {
		padding: 10px;
		/* 内边距 */
		color: #333;
		border-radius: 4px;
		/* 边框圆角 */
		text-align: center;
	}

	/* 基础布局 */
	.container {
		display: flex;
		/* height: 100vh; */
		/* width: 100vw; */
		/* overflow: hidden; */
	}
/* 左侧控制区 - 固定20%宽度 */
	.control-panel {
		flex: 1;
		min-width: 250px;
		/* 最小宽度防止过窄 */
		padding: 10px;
		background-color: #f8f8f8;
		
		/* overflow-y: auto; */
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.control-input {
		height: 100vh;
		flex: 1;
		min-width: 230px;
		/* 最小宽度防止过窄 */
		padding: 2px;
		background-color: #f8f8f8;
		border-right: 1px solid #e0e0e0;
		
		display: flex;
		flex-direction: column;
		
	}

	/* 右侧预览区 - 固定80%宽度 */
	.preview-panel {
		flex: 5;
		padding: 15px;
		/* display: flex; */
		flex-direction: column;
		margin-left: auto;
		height: 100vh;


	}

	/* PDF预览容器 - 关键修改部分 */
	.pdf-view-container {
		/* flex: 1; */
		display: flex;
		flex-direction: column;
		/* border: 1px solid #3ce00e; */
		border-radius: 5px;
		overflow: hidden;
		margin-top: 10px;
		height: 100vh;
	}

	/* WebView样式调整 */
	.pdf-view {
		flex: 1;
		/* width: 61%; */
		height: 100vh;
		/* margin-left: auto; */
		max-width: 60vw;
		/* 新增：使内容靠右 */

	}

	.empty-preview {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
		height: 100%;
	}

	/* 其他样式保持不变 */
	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
		flex: 2;
	}

	.select-btn {
		background-color: #007aff;
		color: white;
		padding: 5px;
		border-radius: 5px;
		margin-bottom: 5px;
		text-align: center;
	}

	.action-btn {
		padding: 5px;
		border-radius: 5px;
		margin: 5px 0;
		text-align: center;
	}

	.process-btn {
		background-color: #34c759;
		color: white;
	}
	.process-btn2 {
		background-color: #34c759;
		color: white;
		margin: 10px;
	}
	.download-btn {
		background-color: #5856d6;
		color: white;
	}

	.file-info {
		margin-bottom: 5px;
		padding: 5px;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.file-name,
	.page-count {
		/* display: block; */
		margin: 3px 0;
		font-size: 14px;
		margin-left: 10px;
	}

	.text-preview {
		flex: 1;
		margin-bottom: 15px;
	}

	.page-lines {
		flex: 1;
		max-height: 300px;
		background-color: #fff;
		border-radius: 5px;
		padding: 10px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.input-sty {
		flex: 1;
		max-height: 380px;
		background-color: #fff;
		border-radius: 5px;
		padding: 10px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.text-line {
		display: flex;
		margin-bottom: 8px;
		margin-left: 5px;
		font-size: 13px;
		line-height: 1.2;
	}

	.line-number {
		color: #666;
		width: 25px;
	}

	.line-text {
		flex: 1;
		word-break: break-all;
		margin-left: 22px;
	}

	.line-coords {
		color: #999;
		font-size: 11px;
		margin-left: 5px;
	}

	.status {
		color: #007aff;
		font-size: 13px;
		margin-top: 10px;
		padding: 5px;
	}

	.error {
		color: #ff3b30;
		font-size: 13px;
		margin-top: 10px;
		padding: 5px;
		background-color: #ffebee;
		border-radius: 3px;
	}

	.row-container {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		margin-top: 5px;
	}

	.label {
		margin-right: 5px;
		/* 标签和输入框之间的间距 */
		flex: 3;
	}

	.input-field {
		flex: 1;
		border: 1px solid #8f8f8f;
		/* 边框：1px 实线 灰色 */
		border-radius: 5px;

		/* 圆角（可选） */
		padding: 4px;
		/* 内边距，让输入内容不紧贴边框 */
		outline: none;
		/* 移除默认聚焦时的外边框（可选） */
	}

	/* 可选：输入框聚焦时的样式 */
	.input-field:focus {
		border-color: #07c160;
		/* 微信绿（可替换成你喜欢的颜色） */
	}
	.wechat-tip {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.8);
	  z-index: 9999;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: white;
	  text-align: center;
	}
	
	.tip-content {
	  padding: 20px;
	  background: #fff;
	  color: #333;
	  border-radius: 10px;
	  max-width: 80%;
	}
	
	.tip-content button {
	  margin-top: 15px;
	  padding: 8px 20px;
	  background: #07C160;
	  color: white;
	  border: none;
	  border-radius: 5px;
	}
</style>